<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        ul {
            all: unset;
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: flex-end;
            list-style: none;
            gap: 20px;

            & li {
                & img {
                    width: 64px;
                    height: 64px;
                    max-width: 128px;
                    min-width: 64px;
                }
            }
        }
    </style>
</head>

<body>
    <ul id="navs">
        <li>
            <img src="./img/appstore.png">
        </li>
        <li>
            <img src="./img/calendar.png">
        </li>
        <li>
            <img src="./img/iTunes.png">
        </li>
        <li>
            <img src="./img/safari.png">
        </li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const navImg = document.querySelectorAll('#navs li img');
            document.addEventListener('mousemove', (e) => {
                const mx = e.clientX;
                const my = e.clientY;
                navImg.forEach((img, index) => {
                    const imgRect = img.getBoundingClientRect();
                    // 坐标轴中心，在左上角
                    const x = imgRect.x + (imgRect.width / 2) - mx;
                    const y = imgRect.y + (imgRect.height / 2) - my;
                    const distance = Math.sqrt(
                        Math.pow(x, 2) + Math.pow(y, 2)
                    );
                    const factor = 128;
                    const ratio = 1 - distance / factor;
                    const scale = Math.abs(
                        ratio < 0.5 ? 0.5 : ratio > 1 ? 1 : ratio
                    );
                    console.log([index, ratio, scale])
                    img.style.width = `${scale * factor}px`;
                    img.style.height = `${scale * factor}px`;

                })
            })
        })
    </script>
</body>

</html>